<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="courses-wrap">
        <input type="text" placeholder="搜索课程" id="js-search-input" />
        <div class="course-tab js-course-tab-filter">
            <ul class="clearfix course-tab-list js-course-tab-list">
                <li class="tab-item">
                    <a href="#" class="course-tab-lk current" data-field="all"> 全部课程</a>
                </li>
                <li class="tab-item">
                    <a href="#" class="course-tab-lk" data-field="free"> 公益课程</a>
                </li>
                <li class="tab-item">
                    <a href="#" class="course-tab-lk" data-field="vip"> 就业课程</a>
                </li>
            </ul>
        </div>
        <div class="course-card-list-wrap">
            <ul class="course-card-list">

            </ul>
        </div>
    </div>




    <div id="J_data" style="display: none;">
        [{ "id": "1", "course": "前端开发之企业级深度JavaScript特训课【JS++前端】", "classes": "19", "teacher": "小野", "img": "ecmascript.jpg", "is_free": "1", "datetime": "1540454477", "price": "0" }, { "id": "2", "course": "WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】", "classes":
        "22", "teacher": "小野", "img": "dom.jpg", "is_free": "0", "datetime": "1540454477", "price": "699" }, { "id": "3", "course": "前端开发之企业级深度HTML特训课【JS++前端】", "classes": "3", "teacher": "小野", "img": "html.jpg", "is_free": "1", "datetime": "1540454477",
        "price": "0" }, { "id": "4", "course": "前端开发之企业级深度CSS特训课【JS++前端】", "classes": "5", "teacher": "小野", "img": "css.jpg", "is_free": "1", "datetime": "1540454477", "price": "0" }, { "id": "5", "course": "前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】", "classes":
        "50", "teacher": "哈默", "img": "vuejs.jpg", "is_free": "0", "datetime": "1540454477", "price": "1280" }, { "id": "6", "course": "前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】", "classes": "21", "teacher": "托尼", "img": "reactjs.jpg", "is_free": "0", "datetime":
        "1540454477", "price": "2180" }, { "id": "7", "course": "WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】", "classes": "700", "teacher": "JS++名师团", "img": "jiuyeban.jpg", "is_free": "0", "datetime": "1540454477", "price": "4980" } ]
    </div>
    <script id="J-cardItemTpl" type="text/html">
        <li class="card-item">
            <a href="#" class="img-lk">
                <img src="./img/{{img}}" alt="">
            </a>
            <div class="item-status">
                <span class="item-status-text">132</span>
            </div>
            <h4 class="item-tt">
                <a class="tt-lk" href="#">  {{coutseName}}</a>
            </h4>
            <div class="item-line">
                <span class="item-price free">{{price}}</span>
                <span class="item-info">{{hours}}课时</span>
            </div>
        </li>
    </script>
    <script src="./js/index.js"></script>
</body>

</html>